<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="Author" content="k1m0no">
    <title>canvas弹幕</title>
    <style>
        body {
            background: #000;
            overflow: hidden;
            margin: 0;
            padding: 0;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="myCanvas"></canvas>
    <script>
        //随机数 min到max
        function getRandomInt(min, max) {
            return min + Math.floor(Math.random() * (max - min + 1));
        }
        
        // 随机颜色
        function getRandomColor() {
            const colors = [
                '#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF', 
                '#00FFFF', '#FFFFFF', '#FFA500', '#FF69B4', '#7CFC00'
            ];
            return colors[Math.floor(Math.random() * colors.length)];
        }

        window.onload = function () {
            let words = [
                "家兴姐姐", "曹家兴", "家兴", "最喜欢我家家兴姐姐了", "like you", 
                "家兴姐姐最棒了", "爱你", "2025.3.29", "好喜欢你", "白白胖胖的好可爱",
                "❤️", "💕", "😍", "👍", "🌟", "✨", "🎉", "💖", "🥰", "😘",
                "家兴姐姐我爱你", "你是最棒的", "支持家兴姐姐", "永远支持你", "加油",
                "棒棒哒", "太可爱了", "美美哒", "喜欢你", "最爱的家兴姐姐"
            ];
            
            let allWord = [];
            let canvas = document.getElementById('myCanvas');
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
            let ctx = canvas.getContext('2d');
            
            let canvasW = canvas.width;
            let canvasH = canvas.height;
            
            function Word() {
                this.text = words[getRandomInt(0, words.length-1)];
                this.x = canvasW + getRandomInt(0, 1000); // 从右侧随机位置开始
                this.y = getRandomInt(0, canvasH);
                this.font = getRandomInt(16, 32) + 'px arial';
                this.speed = getRandomInt(2, 8) + Math.random();
                this.color = getRandomColor();
                this.width = 0;
                this.opacity = Math.random() * 0.7 + 0.3; // 随机透明度
            }

            // 初始创建更多弹幕
            for (let i = 0; i < 100; i++) {
                allWord.push(new Word());
            }

            // 定期添加新弹幕
            setInterval(function() {
                if(allWord.length < 200) { // 控制最大弹幕数量
                    allWord.push(new Word());
                }
            }, 300);

            // 更新
            function update() {
                for (let i = 0; i < allWord.length; i++) {
                    ctx.font = allWord[i].font;
                    allWord[i].width = ctx.measureText(allWord[i].text).width;
                    
                    if (allWord[i].x < -allWord[i].width) {
                        // 从右侧重新开始
                        allWord[i].x = canvasW + getRandomInt(0, 500);
                        allWord[i].y = getRandomInt(0, canvasH);
                        allWord[i].speed = getRandomInt(2, 8) + Math.random();
                    } else {
                        allWord[i].x -= allWord[i].speed;
                    }
                }
            }

            // 绘制
            function draw() {
                ctx.clearRect(0, 0, canvasW, canvasH);
                
                for (let i = 0; i < allWord.length; i++) {
                    ctx.font = allWord[i].font;
                    ctx.globalAlpha = allWord[i].opacity;
                    ctx.fillStyle = allWord[i].color;
                    ctx.fillText(allWord[i].text, allWord[i].x, allWord[i].y);
                    ctx.globalAlpha = 1.0;
                }
                
                update();
                window.requestAnimationFrame(draw);
            }

            // 窗口大小改变时重设canvas大小
            window.addEventListener('resize', function() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
                canvasW = canvas.width;
                canvasH = canvas.height;
            });

            draw();
        };
    </script>
</body>
</html>